04. Layout In React Native

Flexbox Implementation

React Native's Flexbox Implementation

React Native implements flexbox for build layouts, but there are some key differences to keep in mind as you develop your applications. First, all containers in React Native are flex containers by default. Recall that in traditional CSS flexbox, you would normally define a flex container like so:

/*example.css*/

.container {
  display: flex;
}

However, this is completely unnecessary in React Native! By default, everything is display: flex;. You can just use the defaults as they are, without adding different properties or writing extra code.

Another important distinction is how React Native handles flex-direction, a property that establishes the main axis (i.e., defining the direction in which flex items are placed). In web applications, items default to row. But since we're working on mobile devices, React Native sets the default to column, which lays out items vertically.

One more major difference you'll encounter is how the flex property is used. On the web, flex specifies how a flex item grows or shrinks to manage the space around it (along the main axis). In React Native, flex is generally used with flex items that are on the same level, but hold different flex values. For example:

import React from 'react';
import { View } from 'react-native';

const FlexDemo = props => (
  <View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{flex: 2, backgroundColor: 'green'}} />
    <View style={{flex: 3, backgroundColor: 'blue'}} />
  </View>
);

export default FlexDemo;

Here, FlexDemo is a stateless functional component which renders <View> components with different flex values. Its outermost container is set to flex: 1, which will expand the full available width along the main axis (i.e., the entire screen in this example). Its children <View> components will fill the space accordingly, rendering a blue background color that takes up three times as much space as red takes, and green that takes up exactly twice as much space as red takes.

Other Differences

In addition to the above, here is a list of defaults in other common CSS properties that React Native applies to components:

box-sizing: border-box;
position: relative;
align-items: stretch;
flex-shrink: 0;
align-content: flex-start;
border: 0 solid black;
margin: 0;
padding: 0;
min-width: 0;

How does React Native's implementation of CSS flexbox differ from that on the web? Select all that apply:
SOLUTION:
  • Containers are flex containers by default in React Native (i.e., setting `display: flex` is not necessary).
  • In React Native, CSS properties are written in camelCase.
  • Dimensions in React Native are unitless.

Style-Metainfo

Platform API

Recall that React's approach to app development is "learn once, write anywhere." The goal is to use the same principles, technologies, and in the case of React Native -- the same code -- to develop applications. However, there may be cases that make sense to use distinct code for each mobile platform. For example, what if we wanted unique styling between iOS and Android visual components?

React Native gives us a convenient way to organize and separate code through the Platform API. Let's check out an example!

Platform-Specific Styling

Style-AddEntry

Style-UdaciSteppers

Style-Rest

Task Description:

That was a lot of styling! Let's recap what we've done up to this point.

Task List:

Task Feedback:

Fantastic!

💡 Dimensions API💡

React Native also comes with Dimensions, which allows you to select window's width and height in the user's device!

First, make sure you pull the API from React Native:

import { Dimensions } from 'react-native';

Then, you can simply grab the window sizes with the Dimensions API's get method:

const { width, height } = Dimensions.get('window');

Feel free to use these measurements to, for example, plan how your <View>s will look.

History

History-Calendar

💡 UdaciFitness Calendar Update💡

To install the UdaciFitness Calendar, follow the steps below.

  1. Run npm uninstall udacifitness-calendar to uninstall the calendar package from the video above

  2. Run npm install ftrevo/react-native-calendars#master --save

PLEASE NOTE: you must uninstall the udacifitness-calendar package in order for the react-native-calendars package to work.

History-Methods

History-MetricCard

History-AppLoading

Task Description:

The layout is nearly complete! One more check-in before the next section.

Task List:

Task Feedback:

Fantastic!

Summary

React Native uses flexbox to manage layout in mobile applications. However, there are some minor distinctions between the official flexbox specification (i.e., CSS on the web) and React Native's own implementation. Most of these distinctions are just differences in default settings.

Since differences also exist in how Android and iOS applications should look and feel, React Native also offers a Platform API, which we can leverage to style each platform independently.

In the next section, we'll take a look at some common "gotchas" and best practices when styling components.

Further Research

Next Concept